import React, { Component } from 'react'
import axios from 'axios'

import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'

export default class Home extends Component{
    constructor(props){
        super(props)
        this.state = {
            swiperList:[],
            likeList: []
        }
    }
    render() {
        return <div style={{backgroundColor: '#f5f5f5'}}>
            <HomeHeader/>
            <HomeSwiper swiperList={ this.state.swiperList }/>
            <HomeIcons/>
            <HomeRecommend likeList={ this.state.likeList }/>
        </div>
    }
    componentWillMount() {
        axios.get('/api/home.json').then( res=>{
            let data = res.data;
            if(data.ret){
                if(this._isMounted){
                    this.setState({
                        swiperList: data.data.swiperList,
                        likeList: data.data.likeList
                    })
                }
            }
        })
    }
    componentDidMount() {
        this._isMounted = true;
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
}